<script setup lang="ts">
import { useTablePage } from '@/hooks/useTablePage'
import { getPageList, deleteById } from '@/api/system/role'
import { Plus, Search, RefreshRight } from "@element-plus/icons-vue"

const Pagination = defineAsyncComponent(() => import('@/components/Pagination/Pagination.vue'))
const RoleEdit = defineAsyncComponent(() => import('./components/RoleEdit.vue'))
const AssignPermission = defineAsyncComponent(() => import('./components/AssignPermission.vue'))

/**
 * 表格参数
 */
const {
  tabRef,
  pageTypes,
  queryFormRef,
  editRef,
  loading, query, tableList,
  queryData,
  handleRefresh,
  handleQuery,
  resetForm,
  handleDelete,
  handleEdit,
  handleAdd,
} = useTablePage<SysRoleType, SysRoleQuery>({ getPageList, deleteById })

// 分配权限
const permissionRef = ref();
function handlePermission(role: SysRoleType) {
  // console.log('handlePermission', role);
  permissionRef.value.open(role);
}

</script>

<template>
  <div class="h-full w-full flex flex-col">
    <div class="h-50px w-full border border-solid bg-#fff border-[#ddd] rounded-2 p-8px">
      <div class="h-full w-full flex items-center">
        <el-form inline :model="query" ref="queryFormRef" class="h-full">
          <el-form-item label="角色名称" prop="roleName">
            <el-input v-model="query.roleName" maxlength="30" placeholder="请输入角色名称" class="w200px" clearable />
          </el-form-item>
          <el-form-item class="ml-20px">
            <el-button class="search-btn" :icon="Search" @click="handleQuery()">查 询</el-button>
            <el-button class="reset-btn" :icon="RefreshRight" @click="resetForm(queryFormRef)">重 置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="h-[calc(100%-60px)] w-full border border-solid bg-#fff border-[#ddd] rounded-2 mt-10px px-10px">
      <div class="h-50px w-full py-10px relative flex items-center">
        <el-button v-auths="['system:role:add', 'system:role:edit']" class="tab-func-btn" :icon="Plus"
          @click="handleAdd()">新 增</el-button>
        <el-tooltip effect="dark" content="刷新" placement="top">
          <el-icon class="fixed right-80px cursor-pointer transition ease-in-out delay-100 hover:scale-130 duration-10"
            :size="20" @click="handleRefresh">
            <Refresh />
          </el-icon>
        </el-tooltip>
      </div>
      <el-table class="table-con h-[calc(100%-104px)]" ref="tabRef" v-loading="loading" element-loading-text="正在加载中..."
        :data="tableList" stripe :header-cell-style="{ backgroundColor: '#F2F3F5' }">
        <el-table-column align="center" type="index" label="序号" width="90" />
        <el-table-column align="center" prop="roleName" label="角色名称" min-width="120" />
        <el-table-column align="center" prop="status" label="状态" min-width="120">
          <template #default="{ row }">
            <el-tag :type="row.status ? 'success' : 'danger'">{{ row.status ? '启用' : '禁用' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="updateTime" label="更新时间" width="200" />
        <el-table-column align="center" prop="createTime" label="创建时间" width="200" />
        <el-table-column fixed="right" align="center" label="操作" min-width="80">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click.stop="handlePermission(row)">分配权限</el-button>
            <el-button type="primary" size="small" @click.stop="handleEdit(row)">编辑</el-button>
            <el-popconfirm @confirm="handleDelete(row.id)" width="auto" :title="`确定永久删除【${row.roleName}】吗？`">
              <template #reference>
                <el-button type="danger" size="small">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <Pagination :page="pageTypes" @pageChange="queryData"></Pagination>
    </div>
    <RoleEdit ref="editRef" @refresh="queryData" />
    <AssignPermission ref="permissionRef"></AssignPermission>
  </div>
</template>

<style scoped lang="scss"></style>